<template>

<movable-area id="abcid" @mouseup="onMouseup" @mouseleave="onMouseleave" class="width-100" :style="'height:'+maxHeight+'px'">
	<template v-for="(item2,index) in MODL" v-if="movableIf" >
		
		<!-- #ifdef H5 -->
		<movable-view @change="onChange" @mouseup="onMouseup2(index)" @mousedown="onMousedown(index)" :y="htCount(index)" direction="vertical" 
			class="width-100" :style="idxCount(index)" >
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<movable-view @change="onChange" @touchend="onTouchend2(index)" @touchstart="onTouchstart(index)" :y="htCount(index)" direction="vertical"
			class="width-100" :style="idxCount(index)" >
		<!-- #endif -->	
		
			<slot :name="item2.name" ></slot>
		</movable-view>
		
	</template>
</movable-area>	
</template>

<script>
import {ref,onMounted,toRaw} from 'vue'
export default {
	props:['modList'],
	setup(props,ctx){
		const db = (e) => {
			ctx.emit('dragmodmits',e)
		}
		return {
			db
		}
	},
    data() {
        return {
			y:0,
			height:150,
			list:[
				{color:"#ff9900",index:1,height:100},
				{color:"#00cc00",index:1,height:100},
				{color:"#0099ff",index:1,height:100},
				{color:"#0099ff",index:1,height:100},
				{color:"#0099ff",index:1,height:100},
			],
			dragItem:0,
			movableIf:true,
			MODL:this.modList,
			countLock:true,
			maxHeight:0,
			ifdown:false,
        }
    },
    methods: {
		htCount(e){
			if(this.countLock){
				return 0
			}
			
			//console.log("e",e)
			
			//位置转换
			let turePosition=0;
			for(let i in this.MODL){
				if(this.MODL[i].order==e){
					turePosition=i
				}
			}
			//console.log("turePosition",turePosition)
			
			if(turePosition!=0){
				
				let ht=0;
				for(let i=0;i<turePosition;i++){
					ht+=this.list[i].height
				}
				//console.log("ht",ht)
				return ht
			}else{
				return 0
			}
		},
		idxCount(e){
			//console.log("e",e)
			if(this.countLock){
				return 'zIndex:1'
			}
			//console.log('zIndex:'+this.list[e].index)
			return 'zIndex:'+this.list[e].index
		},
        onChange: function(e) {
			//console.log(e)
			
			
			if(e.detail.y>300){
				//this.y=300
			}else if(e.detail.y<300){
				//this.y=400
			}
			
			this.y=e.detail.y;
        },
		onMouseup(e){
			//console.log("up1")	 
			
		},
		//#ifdef APP-PLUS
		onTouchend2(e)
		//#endif 
		//#ifndef APP-PLUS
		onMouseup2(e)
		//#endif 
		{	
			//console.log("up2",e)
			//console.log("y",this.y)
			//console.log("height",this.height)
			//console.log("list2",toRaw(this.list))
			
			this.ifdown=false;
			
			//正确拖拽项转换
			let trueDragItem=0;
			for(let i in this.MODL){
				if(this.MODL[i].order==this.dragItem){
					trueDragItem=i
				}
			}
			
			let htTotal=0;
			for(let i in this.list){
				htTotal+=this.list[i].height
				//console.log(i)
				
				if(i==0){
					if(this.y>=0&&this.y<htTotal){
						//首段
						//console.log("首段")
						
						let splice1=this.list[trueDragItem];
						this.list.splice(trueDragItem,1)
						this.list.splice(i,0,splice1)
						
						
						let splice2=this.MODL[trueDragItem];
						this.MODL.splice(trueDragItem,1)
						this.MODL.splice(i,0,splice2)
					}
				}else{
					let lastHtTotal=htTotal-this.list[i].height
					//console.log("12345",lastHtTotal,htTotal)
					if(this.y>=lastHtTotal&&this.y<htTotal){
						//中段
						//console.log("中段")
						//console.log(i)
						//console.log(trueDragItem)
						
						//交换
						//this.list[i-1]=this.list.splice(trueDragItem,1,this.list[i-1])[0]	
						//this.MODL[i-1]=this.MODL.splice(trueDragItem,1,this.MODL[i-1])[0]
						
						let splice1=this.list[trueDragItem];
						this.list.splice(trueDragItem,1)
						this.list.splice(i,0,splice1)
						
						
						let splice2=this.MODL[trueDragItem];
						this.MODL.splice(trueDragItem,1)
						this.MODL.splice(i,0,splice2)
						
						
					}else if(i==this.list.length-1){	
						if(this.y>=htTotal){
							//尾段
							//console.log("尾段")
							
							//交换
							//this.list[this.list.length-1]=this.list.splice(trueDragItem,1,this.list[this.list.length-1])[0]
							//this.MODL[this.MODL.length-1]=this.MODL.splice(trueDragItem,1,this.MODL[this.MODL.length-1])[0]
							
							let splice1=this.list[trueDragItem];
							this.list.splice(trueDragItem,1)
							this.list.splice(this.list.length,0,splice1)
							
							
							let splice2=this.MODL[trueDragItem];
							this.MODL.splice(trueDragItem,1)
							this.MODL.splice(this.MODL.length,0,splice2)
						}
					}
				} 
				
				//console.log(this.list[i])
			}
			
			//console.log("list置换",toRaw(this.list))
			//console.log("MODL置换",toRaw(this.MODL))
			
			//重绘组件
			this.movableIf=!this.movableIf;
			setTimeout(()=>{
				this.movableIf=!this.movableIf;
				
				this.db(this.MODL)
			},1)
		},
		//#ifdef APP-PLUS
		onTouchstart(e)
		//#endif 
		//#ifndef APP-PLUS
		onMousedown(e)
		//#endif 
		{
			//console.log("down",e)
			this.dragItem=e;
			
			this.ifdown=true;
			
			//堆叠置顶
			for(var i in this.list){
				this.list[i].index=1;
			}
			this.list[this.dragItem].index=10;
			//console.log("upup",toRaw(this.list))
		},
		onMousemove(e){
			//console.log(111)
		},
		onMouseout(e){
			
			//console.log("onMouseout",e)
		},
		onMouseleave(e){
			//console.log("onMouseleave")
			
			if(!this.ifdown){
				return false
			}
			
			//重绘组件
			this.movableIf=!this.movableIf;
			setTimeout(()=>{
				this.movableIf=!this.movableIf;
			},1)
		}
    },
	mounted() {
		//console.log('MODL:',this.MODL)
		const view = uni.createSelectorQuery().in(this).selectAll('.item');
		view.boundingClientRect(data => {
		  //console.log("得到布局位置信息" ,toRaw(data));
		  this.countLock=false;
		  let dt=data;
		  this.list=[];
		  for(let i in dt){
			  //console.log(dt[i])
			  this.list.push({"height":dt[i].height,"index":dt.length-i})
			  
			  this.maxHeight+=dt[i].height
		  }
		  //console.log("布局list",toRaw(this.list))
		  //console.log("maxHeight",this.maxHeight)
		}).exec();
		
		
		
    },
}
</script>

<style lang="scss">
.width-100{
	width:100%;
}
</style>